<template>
  <div id="container">
    <div>
      <h2>用户信息二维码生成测试</h2>
      <el-button plain type="text" @click="doCode">点击生成二维码【图片自动保存至桌面】</el-button>
    </div>
    <div>
      <el-button plain type="text" @click="showCode">点击生成二维码【页面中渲染】</el-button>
      <el-image class="test2" :src="imgSrc" :preview-src-list="srcList" />
    </div>
  </div>
</template>

<script>
import { createZXingCodeSaveToDisk } from '@/api/system/zxing'

export default {
  data() {
    return {
      msg: '',
      imgSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
        'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
      ]
    }
  },
  created() {
  },
  methods: {
    async doCode() {
      await createZXingCodeSaveToDisk().then(res => {
        this.msg = res.msg
      })
      this.$notify({
        title: '成功',
        message: this.msg,
        type: 'success'
      })
    },
    showCode() {
      this.imgSrc = 'http://localhost/dev-api/system/zxing/createZXingCodeImage'
      this.srcList = ['http://localhost/dev-api/system/zxing/createZXingCodeImage']
    }
  }
}
</script>

<style scoped="scoped">
  #container{
    margin: 25px;
  }
  .test2{
    width: 200px;
    height: 200px;
  }
</style>
